<template>
  <div>
    <el-container>
      <el-header>
        <el-row><el-col :span="2"> 用户管理 </el-col></el-row>
      </el-header>
      <el-main>
        <el-button
          icon="el-icon-plus"
          @click="dialogVisibleinsert = true"
          circle
        ></el-button>
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column prop="UserName" label="账号" align="center">
          </el-table-column>
          <el-table-column prop="UserLPWD" label="密码" align="center">
          </el-table-column>
          <el-table-column prop="UserLName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="Rolename" label="职位" align="center">
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="cz(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="delt(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <el-dialog title="用户添加" :visible.sync="dialogVisibleinsert" width="50%">
      <el-form
        ref="forminsert"
        :model="forminsert"
        :rules="formruleinsert"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="UserName">
              <el-input
                v-model="forminsert.UserName"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务类型" prop="RoleID">
              <el-select
                v-model="forminsert.RoleID"
                placeholder="请选择职位"
                style="width: 100%"
              >
                <el-option
                  v-for="item in type"
                  :key="item.RoleID"
                  :label="item.Rolename"
                  :value="item.RoleID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="密码" prop="UserLPWD">
          <el-input v-model="forminsert.UserLPWD"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="UserLName">
          <el-input v-model="forminsert.UserLName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="insert('forminsert')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="用户修改" :visible.sync="dialogVisibleUpdate" width="50%">
      <el-form
        ref="formUpdate"
        :model="formUpdate"
        :rules="formruleUpdate"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="UserName">
              <el-input
                v-model="formUpdate.UserName"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务类型" prop="RoleID">
              <el-select
                v-model="formUpdate.RoleID"
                placeholder="请选择职位"
                style="width: 100%"
              >
                <el-option
                  v-for="item in type"
                  :key="item.RoleID"
                  :label="item.Rolename"
                  :value="item.RoleID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="密码" prop="UserLPWD">
          <el-input v-model="formUpdate.UserLPWD"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="UserLName">
          <el-input v-model="formUpdate.UserLName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="upd('formUpdate')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Getsyyh, Type, Insertyh, Updyh, Delt } from "../http/user.js";
import qs from "qs";
export default {
  data() {
    var validQC = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback();
        } else {
          callback(new Error("请输入汉字"));
        }
        callback();
      }
    };
    var validQC1 = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("不可以入汉字"));
        } else {
          callback();
        }
        callback();
      }
    };
    return {
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      tableData: [],
      type: [],
      dialogVisibleinsert: false,
      forminsert: {
        UserLName: "",
        UserLPWD: "",
        UserName: "",
        RoleID: "",
      },
      formruleinsert: {
        UserName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        UserLPWD: [{ validator: validQC1, trigger: "blur" }],
        UserLName: [{ validator: validQC, trigger: "blur" }],
        RoleID: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
      },
      dialogVisibleUpdate: false,
      formUpdate: {
        UserID: "",
        UserLName: "",
        UserLPWD: "",
        UserName: "",
        RoleID: "",
      },
      formruleUpdate: {
        UserName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        UserLPWD: [{ validator: validQC1, trigger: "blur" }],
        UserLName: [{ validator: validQC, trigger: "blur" }],
        RoleID: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    delt(row) {
      if (confirm("确定删除吗")) {
        Delt({
          params: {
            id: row.UserID,
          },
        })
          .then((res) => {
            if (res.Data == 1) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              Getsyyh({
                params: {
                  i: this.currentPage,
                  j: this.pageSize,
                },
              })
                .then((res) => {
                  console.log(res);
                  if (res.Data == "") {
                    console.log(2);
                    this.currentPage = this.currentPage - 1;
                    this.sx();
                  } else {
                    this.sx();
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    upd(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Updyh(qs.stringify(this.formUpdate))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "恭喜你，修改成功",
                  type: "success",
                });
                this.dialogVisibleUpdate = false;
                this.sx();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    cz(row) {
      this.dialogVisibleUpdate = true;
      this.formUpdate.UserName = row.UserName;
      this.formUpdate.UserLPWD = row.UserLPWD;
      this.formUpdate.UserLName = row.UserLName;
      this.formUpdate.UserID = row.UserID;
      this.formUpdate.RoleID = row.RoleID;
    },
    insert(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Insertyh(qs.stringify(this.forminsert))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.sx();
                this.dialogVisibleinsert = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    sx() {
      Getsyyh({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.log(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.log(err);
        });
      Type()
        .then((res) => {
          console.log(res);
          this.type = res.Data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.sx();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.sx();
    },
  },
  mounted() {
    this.sx();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-2 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
element.style {
  height: 100%;
  width: 1239px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
  position: relative;
  top: -10px;
  right: -570px;
}
</style>